<template>
    <Icon class="hover:bg-zinc-100 p-1 rounded" @pointerdown="show = true">settings</Icon>
    <BlurCard :show="show" class="flex flex-col p-4 justify-evenly" @close="show = false">
        <b class="text-4xl text-center text-cyan-400/90">ProPixel 设置</b>

        <cell-group inset>
            <field name="uploader" label="文件上传" input-align="center" label-align="center">
                <template #input>
                    <uploader
                        v-model="backgroundImage"
                        :after-read="(uploaded as any)"
                        max-count="1"
                        @delete="deleteBackground"
                    />
                </template>
            </field>
            <!-- 
                <Field name="width" label="宽">
                    <template #input>
                        <Stepper min="1" v-model="file.height" theme="round"></Stepper>
                    </template>
                </Field>
            -->
        </cell-group>
    </BlurCard>
</template>

<style scoped>
</style>

<script lang="ts" setup>
import { Field, CellGroup, Stepper, Form, Button, Uploader, UploaderFileListItem } from 'vant';
import { reactive, ref } from 'vue';
import BlurCard from './BlurCard.vue'
import Icon from '@konghayao/vue-material-icons';
import { useSettingStore, SETTING } from './store/setting';
const store = useSettingStore()

const show = ref(false)

// 背景图设置
const backgroundImage: UploaderFileListItem[] = reactive([])
const uploaded = (items: UploaderFileListItem) => {
    const { file } = items
    if (file) {
        backgroundImage[0] = items
        store.setSolidData({ backgroundImage: file })
        store.saveData()
    }

}
const deleteBackground = () => {
    store.setSolidData({ backgroundImage: null })
    backgroundImage.pop()
}
// 初始化设置
store.refreshData().then(() => {
    if (SETTING.backgroundImage instanceof File) {
        const url = URL.createObjectURL(SETTING.backgroundImage)
        backgroundImage[0] = { url, file: SETTING.backgroundImage, isImage: true }
    }
})

</script>